<template>
  <div>
    <x-header :left-options="{backText: ''}" :title="$route.name" style="background-color: #FFFFFF"></x-header>
    <div>
      <van-tabs v-model="active" @change="changeTabs" border class="tabs-first">
        <van-tab title="风控规则">
          <gz-default-page v-if="!ruleDetails.ruleList || ruleDetails.ruleList.length <= 0" :textSize="'1.3em'" :text="'暂无规则'"></gz-default-page>
          <van-tabs v-if="ruleDetails.ruleList && ruleDetails.ruleList.length > 0" v-model="subActive" swipeable
            line-height="0px" class="tabs-second" @change="changeRuleType">
            <van-tab v-for="(tab,tindex) in ruleDetails.ruleList" :key="tindex" :title="ruleTypeList[tab.ruleType]">
              <div class="tab-content">
                <div ref="contentHeader" class="content-header">
                  <div class="top">
                    <div class="title">信用级别</div>
                    <div class="level">
                      <div class="level-value">{{ruleDetails.creditLevel || 0}}</div>
                      <div>级</div>
                    </div>
                  </div>
                  <div class="bottom">
                    <div class="bottom-item" @click="changeRule('strong')">
                      <div class="title" :class="ruleType == 'strong' ? 'active-item' : ''">
                        强规则
                        <div class="badge">{{tab.strongRuleList.length > 0 ? tab.strongRuleList.length : 0}}</div>
                      </div>

                    </div>
                    <div class="bottom-item" @click="changeRule('weak')">
                      <div class="title" :class="ruleType == 'weak' ? 'active-item' : ''">
                        弱规则
                        <div class="badge">{{tab.weakRuleList.length > 0 ? tab.weakRuleList.length : 0}}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="content-middle" ref="contentMiddle">
                  <div class="list-group" v-if="(ruleType == 'strong' && tab.strongRuleList.length > 0) || (ruleType == 'weak' && tab.weakRuleList.length > 0)" v-for="item in ruleType == 'strong' ? tab.strongRuleList : tab.weakRuleList" :key="item.ruleCode">
                    <div class="list-item">
                      <div class="title">规则类型：</div>
                      <div class="value">{{ruleTypeList[item.ruleType]}}</div>
                    </div>
                    <div class="list-item">
                      <div class="title">规则名称：</div>
                      <div class="value">{{item.ruleName}}</div>
                    </div>
                    <div class="list-item">
                      <div class="title">规则描述：</div>
                      <div class="value">{{item.ruleDesc}}</div>
                    </div>
                    <div class="list-item">
                      <div class="title">规则级别：</div>
                      <div v-if="item.ruleLevel == '0001'" class="value value-badge--strong">强规则</div>
                      <div v-if="item.ruleLevel == '0002'" class="value value-badge--weak">弱规则</div>
                    </div>
                    <div class="list-item">
                      <div class="title">验证结果：</div>
                      <div class="value">{{ruleResultlList[item.ruleResult]}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </van-tab>
          </van-tabs>
        </van-tab>
        <van-tab title="征信报告" disabled></van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
  import {
    Tab,
    Tabs,
    Badge
  } from 'vant';
  import {
    gzDefaultPage
    } from '@/components/customize'
  const ruleTypeList = {
    "0001": "业务排除",
    "0002": "风险排除",
    "0003": "第一次反欺诈排除",
    "0004": "反欺诈系统规则"
  }
  const ruleMainList = {
    "0001": "借款人",
    "0002": "共借人",
    "0003": "企业"
  }
  const ruleLevelList = {
    "0001": "强规则",
    "0002": "弱规则"
  }
  const ruleResultlList = {
    "0000": "通过",
    "0001": "预警",
    "0002": "拒绝"
  }
  export default {
    components: {
      [Tab.name]: Tab,
      [Tabs.name]: Tabs,
      [Badge.name]: Badge,
      gzDefaultPage
    },
    data() {
      return {
        active: 0,
        subActive: 0,
        ruleType: 'strong',
        pageHeight: '0px',
        ruleTypeList,
        ruleMainList,
        ruleLevelList,
        ruleResultlList,
        ruleDetails: {},
        subTabs: [],
        instId: ''
      }
    },
    created() {
      let that = this
      window.onresize = () => {
        setTimeout(() => {
          that.getScorllViewHeight()
        }, 500)
      }
    },
    mounted() {
      let instId = ''
      if(this.$route.query.instId) {
        instId = this.$route.query.instId
        this.instId = instId
      }
      this.getRuleDetail(instId)
    },
    updated() {
      let that = this
      this.$nextTick(() => {
        that.getScorllViewHeight()
      })
    },
    methods: {
      getScorllViewHeight() {
        let header = this.$refs.contentHeader
        let middle = this.$refs.contentMiddle
        let topHeight = 46 + 44 + 44 + 24 + 54 // 顶部标题栏固定高度46，tabs固定高度44，上下边距12 * 2，contentMiddle上下内边距 21 + 33
        let headerHeight = []
        for(let i = 0;i < header.length;i++) {
          headerHeight.push(this.$refs.contentHeader[i].offsetHeight)
        }
        const pageHeight = window.innerHeight;
        for(let v = 0;v < middle.length;v++) {
          this.$refs.contentMiddle[v].style.height = `calc(${pageHeight}px - ${topHeight + headerHeight[v]}px)`
          this.$refs.contentMiddle[v].style.overflowY = 'scroll'
        }
      },
      changeRule(type) {
        this.ruleType = type
        this.getScorllViewHeight()
      },
      changeRuleType(param) {
        this.getScorllViewHeight()
      },
      changeTabs() {

      },
      getRuleDetail(id) {
        this.$vux.loading.show({
          text: '加载中...'
        })
        this.baseService.postForm(this.__ctx + '/gz/api/preCreditDetail', {
          applyLncode: id
        }).then(res => {
          this.$vux.loading.hide()
          if (res.isOk) {
            if (res.data.responseCode == 'IDPAAAAAAA') {
              let result = res.data.responseData.body
              this.ruleDetails = result
            } else {
              this.ruleDetails = {}
              this.$vux.toast.show({
                text: res.data.responseMessage,
                type: 'warn'
              })
            }
          } else {
            this.ruleDetails = {}
            this.$vux.toast.show({
              text: res.msg,
              type: 'warn'
            })
          }
        }).catch(err => {
          this.$vux.loading.hide()
          this.ruleDetails = {}
          this.$vux.toast.show({
            text: '获取风控规则失败：' + err,
            type: 'warn'
          })
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  /deep/ .vux-header .vux-header-title {
    font-size: 16px;
    font-weight: bold;
  }

  /deep/ .van-tab--active {
    color: #FF4A32;
  }

  /deep/ .van-tabs__line {
    background-color: #FF4A32;
  }

  /deep/ .van-tab {
    font-weight: 500;
  }

  .tabs-first {
    /deep/ .van-tab {
      font-size: 16px;
    }
  }

  .tabs-second {
    /deep/ .van-tab {
      font-size: 14px
    }
  }

  .tab-content {
    background-color: #FFFFFF;
    margin: 12px;
    border-radius: 8px;

    .content-header {
      padding: 0 16px;
      margin-bottom: 21px;
      box-sizing: border-box;
      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.06);

      .top {
        padding: 14px 0;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px dashed #C9CDD4;

        .title {
          font-size: 15px;
          color: #86909C;
        }

        .level {
          font-size: 16px;
          color: #1D2129;
          display: flex;
          align-items: center;

          .level-value {
            font-size: 32px;
            font-weight: 500;
            margin-right: 4px;
          }
        }
      }

      .bottom {
        display: flex;
        align-items: center;
        padding: 11px 0;
        box-sizing: border-box;

        .bottom-item {
          flex: 1;
          text-align: center;
          font-size: 14px;
          color: #86909C;
          display: flex;
          justify-content: center;

          .title {
            position: relative;

            .badge {
              font-size: 11px;
              color: #ffffff;
              position: absolute;
              top: -3px;
              right: -24px;
              background-color: #FF4A32;
              padding: 0 4px;
              border-radius: 20px;
            }
          }
        }

        .active-item {
          color: #FF4A32;
        }
      }
    }

    .content-middle::-webkit-scrollbar {
      display: none;
      /* Chrome Safari */
    }

    .content-middle {
      padding: 0 16px 33px 16px;
      scrollbar-width: none;
      /* firefox */
      -ms-overflow-style: none;

      /* IE 10+ */
      .list-group {
        margin-top: 20px;

        .list-item {
          display: flex;
          // align-items: center;
          padding-top: 6px;

          .title {
            font-size: 15px;
            color: #86909C;
            flex-shrink: 0;
          }

          .value {
            margin-left: 9px;
            font-size: 15px;
            color: #1D2129;
          }

          .value-badge--weak {
            font-size: 12px;
            color: #3E8EFE;
            background-color: #F4F6FE;
            padding: 2px 4px;
          }

          .value-badge--strong {
            font-size: 12px;
            color: #FF4A32;
            background-color: #F4F6FE;
            padding: 2px 4px;
          }
        }
      }

      .list-group:first-child {
        margin-top: 0;
      }
    }
  }
</style>
